Vue 模板運用 Template


Posted by hoyi-23 on 2021-08-05

純文字插入

{{TEXT}}

HTML結構插入

使用v-html插入
在網頁上直接寫入html是危險的,可能導致 XSS攻擊 (透過用戶端輸入框寫入HTML來攻擊),因此v-html 只能用在可信任的內容上,不要用在用戶提交的內容上

單次綁定

v-once
只會輸出一次,之後輸出不會更著綁定

表達式插入

{{ text1 + text2 }}
{{ number1 * number2 }}
{{ text.split('').reverse().join('')}}

透過資料狀態操作HTML屬性

綁上ID

v-bind:id=" "
:id=" "

操作Input狀態 disabled

:disabled =" isDisabled" (true/false控制)


繼續閱讀其他文章

v-bind 動態屬性指令
v-model 資料雙向綁定










Related Posts

來學 React 吧之一_以 todo list 為例學會 React 基礎與 useState 介紹

來學 React 吧之一_以 todo list 為例學會 React 基礎與 useState 介紹

認識JavaScript中的Hoisting

認識JavaScript中的Hoisting

用函式來傳達你的心意> 0 <

用函式來傳達你的心意> 0 <


Comments